<template>
	<view :style="isM?'height: calc(100%  - 95rpx)':'height: 100%'" class="appBox">
		<view class="header">
			<uni-icons @click="back" color="#fff" type="left" size="26"></uni-icons>
			<view class="txt">
				收款码
			</view>
			<label @click="recordListHandler">收款记录</label>
		</view>
		<view class="tabs" v-if="isShow === 1 && isM">
			<view :class="{'act':tabsCurrent==index}" @click="tabsHandler(index)" class="tab-item"
				v-for="(item,index) in tabs" :key="index">{{ item }}</view>
		</view>

		<view class="contentPage" v-if="isShow === 1">
			<view class="content">
				<view class="userInfor">
					<view class="username">
						{{userInfo.nickname}}( *{{ userInfo.realName.substring(1)}} )
					</view>
					<view v-show="tabsCurrent!=1">
						<view class="money" v-if="money">
							￥{{ money }}
						</view>
						<view class="remarks" v-if="remarks">
							{{ remarks }}
						</view>
					</view>
					<view style="color: #aaa;" v-show="tabsCurrent==1">
						打开扫一扫，扫描二维码
					</view>
				</view>
				<view class="qrCode">
					<canvas canvas-id="qrcode" style="width:170px; height:170px;margin:0 auto"></canvas>
				</view>
				<view class="other">
					<view v-show="tabsCurrent!=1" class="setMoney" @click="isShow = 2">
						设置金额
					</view>
					<!-- #ifdef APP-PLUS -->
					<view v-show="tabsCurrent!=1">|</view>
					<view class="setMoney" @click="saveImage">
						保存二维码
					</view>
					<!-- #endif -->
				</view>


			</view>
		</view>
		<view class="setMoneyPage" v-if="isShow === 2 ">
			<view style="font-size: 30rpx;">
				收款金额
			</view>
			<view class="content">
				<view style="line-height: 100rpx;font-size: 50rpx;font-weight: bold;">￥</view>
				<input type='number' class="input" v-model="money"></input>
			</view>
			<view @click="open" v-if="!this.remarks"
				style="margin-top: 15rpx;font-size: 28rpx;margin-bottom: 15rpx;color: blue;">
				添加备注
			</view>
			<view v-else style="margin-top: 15rpx;font-size: 12rpx;margin-bottom: 15rpx;">
				{{ remarks }} <span style="margin-left: 10rpx;color: blue;" @click="open"> 修改</span>
			</view>
			<view class="btn" @click="confirm">
				确 定
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false">
			<view class="remarksTk">
				<view class="title">添加收钱备注</view>
				<view class="remarksContent">
					<input type='text' class="input" v-model="remarks"></input>
				</view>
				<view class="btn">
					<view @click="close" class="close">关闭</view>
					<view @click="close" class="confirm">确认</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	import store from "@/store/index.js"

	export default {
		data() {
			return {
				tabs: ['我的收款码', "商户收款码"],
				isM: false,
				tabsCurrent: 0,
				address: {},
				isShow: 1,
				remarksInput: false,
				money: '',
				remarks: '',
				// userInfo: ''
			}
		},
		onLoad(options) {
			const _temp = Boolean(options.isM)
			if (_temp) {
				this.isM = _temp
			}

		},
		computed: {
			userInfo() {
				console.log(store.state.app.userInfo)
				return store.state.app.userInfo || ""
			}
		},
		mounted() {
			this.qrFun()
		},
		methods: {
			recordListHandler(){
				uni.navigateTo({
					url:'/pages/users/moneyReceiving/recordList'
				})
			},
			back(){
				uni.navigateBack()
			},
	
			tabsHandler(index) {
				this.tabsCurrent = index
				this.qrFun()
			},
			saveImage() {
				const that = this
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: function(res) {
						const tempFilePath = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								})
							},
							fail: function(err) {
								console.log('保存失败：', err)
							}
						})
					},
					fail: function(err) {
						console.log('转换失败：', err)
					}
				})
			},
			//**生成二维码**//
			qrFun() {
				let address = {}
				if (this.isM) {
					address.type = 3
				} else {
					address.type = 1
				}
				if (this.userInfo.uid) {
					address['uid'] = this.userInfo.uid
				}
				// if (this.money && !this.isM) {
					address['money'] = this.money
				// }

				//const texts = address.toString() 
				const texts = encodeURIComponent(JSON.stringify(address))
				//const texts  =  JSON.stringify(address) 
				const text = uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: texts, //这里的text需要生成的二维码地址
					size: 170, //和上面保持一致即可默认像素
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel,
					success: res => {}
				})
			},
			confirm() {
				this.isShow = 1
				this.qrFun(this.address)
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	>>>.uni-popup .uni-popup__wrapper {
		width: 70% !important;
	}

	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.header{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		height: 44px;
		color: #fff;
		background: #4389F1;
		padding: 7px 3px;
		.txt{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ffffff;
		font-weight: bold;

		.tab-item {
			width: 50%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #fff;
			border-radius: 5rpx;
		}

		.act {
			background-color: #4389F1;
			color: #fff;
		}
	}

	.appBox {
		// height: calc(100%  - 95rpx);

		.contentPage {
			background-color: white;
			background-color: $theme-color;
			height: 100%;
			padding: 16rpx 20rpx;

			.content {
				height: 65%;
				background-color: white;
				border-radius: 20rpx;
				padding: 100rpx 20rpx 10rpx 20rpx;

				.userInfor {
					margin: 0 atuo;
					text-align: center;

					.username {
						padding-bottom: 20rpx;
						font-size: 32rpx;
					}

					.money {
						margin: 20rpx 0;
						font-size: 40rpx;
						font-weight: bold;
					}

					.remarks {
						font-size: 12rpx;
					}
				}

				.qrCode {
					margin: 20rpx 0;

				}

				.other {
					margin-top: 66rpx;
					display: flex;
					justify-content: space-around;

					.setMoney {
						color: blue;
					}
				}

			}

		}

		.setMoneyPage {
			padding: 60rpx 40rpx 0 40rpx;

			.title {
				font-size: 12rpx;
				margin-bottom: 15rpx;
			}

			.content {
				height: 100rpx;
				display: flex;
				margin: 20rpx 0;

				.input {
					height: 100%;
					font-size: 60rpx;
					font-weight: bold;
					padding-left: 25rpx;
					border-bottom: #c5c5c5 solid 1rpx;
				}
			}

			.btn {
				margin-top: 180rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: $theme-color;
				border-radius: 30rpx;
				text-align: center;
				font-size: 33rpx;
				font-weight: bold;
				color: white;
			}
		}

		.remarksTk {
			position: relative;
			height: 300rpx;
			background-color: white;
			border-radius: 20rpx;

			.title {
				padding: 24rpx 0;
				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
			}

			.remarksContent {
				width: 90%;

				margin: 30rpx auto;

				.input {
					paading: 15rpx 0;
					font-size: 30rpx;
					padding-left: 25rpx;
					border-bottom: $theme-color solid 1rpx;
				}
			}

			.btn {
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				line-height: 100rpx;
				border-top: #fafafa solid 1rpx;
				color: $theme-color;
				font-weight: bold;


				.close {
					color: black;
					text-align: center;
					border-right: #fafafa solid 1rpx;
					width: 50%
				}

				.confirm {
					width: 50%;
					text-align: center;
				}
			}
		}

	}


	page {
		background-color: #fff !important;
	}
</style>